<template>
  <div class="line-cart f-sb-fs">
    <router-link to="/" class="f-c-c"
      ><el-image :src="imgSrc" fit="cover"></el-image
    ></router-link>
    <div id="info">
      <div id="head" class="f-sb-c">
        <router-link to="/" class="title"
          >这里是标题内容这里是标题内容这里是标题内容这里是标题内容这里是标题内容这里是标题内容</router-link
        >
        <div class="btns f-sa-c-c">
          <span @click="$router.push('/confirmOrder')">购买</span>
          <span>移出</span>
        </div>
      </div>
      <div id="body" class="f-sb-c">
        <div class="tags">
          <el-tag size="mini" type="info">套餐一</el-tag>
          <el-tag size="mini" type="info">绚丽橙</el-tag>
          <el-tag size="mini" type="info">6+64G</el-tag>
        </div>
        <el-tooltip effect="dark" content="单价" placement="top-start">
          <span class="price">￥1234.00</span>
        </el-tooltip>
      </div>
      <div id="foot" class="f-sb-fe">
        <el-input-number
          size="mini"
          v-model="amount"
          :step="1"
          :min="1"
          :max="10"
        ></el-input-number>
        <el-tooltip effect="dark" content="总价" placement="top-start">
          <span class="price">￥1634.00</span>
        </el-tooltip>
      </div>
    </div>
    <el-checkbox v-model="checked" class="item-checkbox"></el-checkbox>
  </div>
</template>
<script>
export default {
  name: "blockCart",
  components: {},
  data() {
    return {
      checked: true,
      amount: 2,
      imgSrc: require("@/public/img/defaultGoods.png"),
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.line-cart {
  padding: 5px 0;
  border-bottom: 1px solid $border-color-extra-light;
  .el-checkbox {
    align-self: center;
  }
}
.el-image {
  width: 100px;
  height: 100px;
  margin: 5px 0;
}
#info {
  width: calc(100% - 110px);
  .price {
    font-weight: bolder;
  }
}
#head {
  height: 44px;
  .title {
    @include text-ellipsis;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    width: calc(100% - 50px);
  }
  .btns {
    font-size: 12px;
    height: 100%;
    span {
      color: #fff;
      cursor: pointer;
      display: inline-block;
      padding: 1px 10px;
      border-radius: $border-radius-small;
      background: $theme-color;
      &:hover {
        background: $theme-color-hover;
      }
    }
  }
}
#body {
  margin: 2px 0 8px;
  .el-tag:not(:last-child) {
    margin-right: 5px;
  }
  .price {
    font-size: 14px;
    color: #999999;
  }
}
#foot {
  .el-input-number--mini {
    width: 100px;
  }
  .price {
    font-size: 16px;
    color: $rmb-color;
  }
}
.item-checkbox{
  margin-left: 10px;
}
</style>